<template>
  <div class="home-container page-container">
    <div class="page-header flex justify-between items-center mb-8">
      <div>
        <h2 class="page-title">首页</h2>
        <p class="page-description">欢迎使用剧本管理系统</p>
      </div>
    </div>
    
    <!-- 功能卡片区域 -->
    <div class="card-list mb-6">
      <el-card
        class="feature-card h-full cursor-pointer"
        shadow="hover"
        @click="router.push('/drama/list')"
      >
        <div class="feature-content flex items-center">
          <div class="feature-icon bg-blue-500 text-white p-4 rounded-lg">
            <el-icon :size="32"><Document /></el-icon>
          </div>
          <div class="feature-info ml-4">
            <h3 class="text-xl font-bold mb-1">剧本列表</h3>
            <p class="text-gray-500">管理所有剧本</p>
          </div>
        </div>
      </el-card>
      
      <el-card
        class="feature-card h-full cursor-pointer"
        shadow="hover"
        @click="router.push('/drama/create')"
      >
        <div class="feature-content flex items-center">
          <div class="feature-icon bg-green-500 text-white p-4 rounded-lg">
            <el-icon :size="32"><Plus /></el-icon>
          </div>
          <div class="feature-info ml-4">
            <h3 class="text-xl font-bold mb-1">创建剧本</h3>
            <p class="text-gray-500">新建剧本项目</p>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 快捷入口 -->
    <el-card class="mt-8">
      <template #header>
        <div class="flex items-center">
          <el-icon class="mr-2"><HomeFilled /></el-icon>
          <span class="text-lg font-bold">快速导航</span>
        </div>
      </template>
      <div class="shortcut-menu flex flex-wrap gap-4">
        <el-button @click="router.push('/drama/list')">
          <el-icon class="mr-1"><List /></el-icon>
          剧本列表
        </el-button>
        <el-button color="#1c1d29" @click="router.push('/drama/create')">
          <el-icon class="mr-1"><Plus /></el-icon>
          创建剧本
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { Document, Plus, List, HomeFilled } from '@element-plus/icons-vue'

const router = useRouter()
</script>

<style scoped>
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  transition: all 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 